<template>
  <el-container id="app">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="4" class="bg2">
        <img src="@/assets/logo.jpg" alt="">
      </el-col>
      <el-col :span="9">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/aboutUs">房产经纪</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/classification">地产分类</router-link>
          </el-menu-item>
          <el-menu-item index="4">
            <router-link to="/houseAgent">关于我们</router-link>
          </el-menu-item>
          <el-menu-item index="5">
          <el-row >
          <el-col>
            <el-input
              v-model="input"
              placeholder="请输入想搜索的地区"
              clearable
            >
              <el-button slot="append" icon="el-icon-search" @click="getName">
              </el-button>
            </el-input>
          </el-col>
        </el-row>
        </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <el-main><router-view/></el-main>

    <el-footer>
      <div class="footer">
      <el-row type="flex" class="row-bg row11" justify="space-around">
        <el-col :span="5" type="flex" justify="start" class="tac" >
         <h4>
          if级引擎——出自赛博if公司工匠
          </h4> 共同打造的上T位星际旅行者"跃迁旅行神器”
        <br><span>60,000T</span>个跃迁地点
         <br><span>600,000T</span> 个星座旅地新玩法 
         <br><span>760,000,000m</span> 次攻略下裁
         <br><span>38,000m</span> 星际旅行公司
          全球旅游目品供应商
        </el-col>
        <el-col :span="4">
          关于我们
          <br>隐私政策  商标声明
          <br>服务协议  游记协议
          <br>商城平台服务协议
          <br>网络信息侵权通知指引
          <br>旅游旅游网服务监督员
          <br>网站地图 加入大笨钟
        </el-col>
        <el-col :span="4">
          旅行服务
          <br>
      旅游攻略 酒店预订<br>
      旅游特价 国际租车<br>
      旅游问答 旅游保险<br>
      旅游指南 订火车票<br>
      旅游资讯 APP下裁<br>
        </el-col>
        <el-col :span="4" class="bg1">
         <img src="@/assets/attention.png" alt=""> 
         <div>关注我们</div>
        </el-col>
      </el-row>
      </div>
      </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      input: "",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getName(){

    }
  },
};
</script>

<style lang="scss">
.bg2{
  img{
    width: 60px;
  }
}
.tac{
  text-align: start;
  margin-top: -25px;
}
.bg1{
  img{
    width: 120px;
  }
}
.row11 {
    margin: 40px 400px 0 400px;
    span{
   color: #ba8529;
    }
  }
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.el-container {
  min-height: 95vh;
}
a {
  text-decoration: none;
}
.footer{
  position: fixed;
  width: 100%;
  height: 240px;
  right: 0;
  bottom: 0;
  background-color: #333;
  color: #fff;
}
</style>
